<template>
	<view>
		<global-contact></global-contact>
		<!-- #ifdef MP-WEIXIN -->
		<view class="contain">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="contain header-top-h5">
				<!-- #endif -->


				<view class="search">
					<!-- <image style="width: 30rpx;height: 30rpx;" src="https://www.atuanjian.com/appletStatic/static/local.png" mode=""></image>
					<view class="local" style="margin-right:10rpx;" @click="chooseCity()">
						<text>{{currentCity.lastIndexOf('市')?currentCity.replace(/市/,""):currentCity}}</text>
						<view class="trang"></view>
					</view> -->
					<image @click="changeSort()" src="https://www.atuanjian.com/appletStatic/static/sort.png"
						mode="aspectFit">
						<view class="searchin">
							<u-search @search="searchList()" placeholder="户外拓展/团建/骑行" :showAction="false"
								v-model="keyword"></u-search>
						</view>
					</image>
					<u-line direction="col" length="24rpx" color="#E7E7E7"></u-line>
			<image @click="filtrate()" src="https://www.atuanjian.com/appletStatic/static/choice.png" mode="aspectFit">
			</image>
				</view>
				<!-- <view class="header">
			<view class="nav" @click="sortTime()">
				<text>发布时间</text>
				<image src="https://www.atuanjian.com/appletStatic/static/filter.png" mode="aspectFit"></image>
			</view>
			<view class="nav" @click="sortNum()">
				<text>浏览量</text>
				<image src="https://www.atuanjian.com/appletStatic/static/filter.png" mode="aspectFit"></image>
			</view>
		</view> -->

			</view>

			<view class="list" v-if="list.length > 0">
				<view class="item" v-for="(item, index) in list" :key="index" @click="videoDetail(item)">
					<view class="img">
						<image class="pic" :src="showImg + item.img" mode="aspectFill"></image>
						<!-- <image class="play" src="https://www.atuanjian.com/appletStatic/static/play.png" mode="aspectFit"></image> -->
					</view>
					<view class="images" style="margin-top: 20rpx;">
						<image style="margin-left: 10rpx;"
							src="https://www.atuanjian.com/appletStatic/static/home/a1.png" mode=""></image>
						<text style="margin-right:20rpx;">{{ item.people_num || 0 }}人</text>
						<image style="margin-left: 10rpx;"
							src="https://www.atuanjian.com/appletStatic/static/home/a2.png" mode=""></image>
						<text style="margin-right:20rpx;">{{ item.activity_day || '' }}</text>
						<image style="margin-left: 10rpx;" src="https://www.atuanjian.com/appletStatic/static/ic4.png"
							mode=""></image>
						<text style="margin-right:20rpx;">{{ item.hit || 0 }}浏览</text>
					</view>
					<view class="text">{{ item.title }}</view>
				</view>
			</view>
			<view class="list" v-else>
				<u-empty mode="data" :text="uEmptyText" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
			<u-picker :show="showCity" :columns="cityList" @cancel="cancel1" @confirm="confirm1"></u-picker>
			<u-picker :show="showSort" keyName="label" :columns="sortList" @cancel="cancelSort"
				@confirm="confirmSort"></u-picker>

		</view>
</template>

<script>
import {
	productVideo,
	siteSetting
} from '@/utils/request.js'
export default {
	data() {
		return {
			list: [],
			showImg: '',
			page: 0,
			totalPage: 1,
			keyword: '',
			release_date: '',
			hit: '',
			typeId: '',
			currentCity: uni.getStorageSync('webAddress'),
			showCity: false,
			cityList: [],
			showSort: false,
			sortList: [
				[{
					label: '默认排序',
					value: '0'
				}, {
					label: '按发布时间',
					value: '1'
				}, {
					label: '按浏览量',
					value: '2'
				}]
			],
			newUrl: '',
			uEmptyText: '数据加载中...',
		}
	},
	methods: {
		changeSort() {
			this.showSort = true
		},
		cancelSort() {
			this.showSort = false
		},
		confirmSort(e) {
			console.log('点击', e)
			// release_date hit
			if (e.value[0].value == 0) {
				this.release_date = ''
				this.hit = ''
			} else if (e.value[0].value == 1) {
				this.release_date = 'desc'
				this.hit = ''
			} else if (e.value[0].value == 2) {
				this.release_date = ''
				this.hit = 'desc'
			}
			this.showSort = false
			this.page = 0
			this.list = []
			this.getList()
		},
		chooseCity() {
			this.showCity = true
		},
		cancel1() {
			this.showCity = false
		},
		confirm1(event) {
			uni.setStorageSync('webAddress', event.value[0])
			this.currentCity = event.value[0]
			this.showCity = false
			this.page = 0
			this.list = []
			this.getList()
		},
		async siteSetting() {
			return await siteSetting()
		},
		getSetting() {
			this.siteSetting().then(res => {
				uni.setStorageSync('webAddress', res.default_substation)
				// this.currentCity=res.default_substation
				if (res.city && res.city.length > 0) {
					this.cityList.push(res.city)
				}
				// this.defaultMethods()
			})
		},
		searchList() {
			this.typeId = ''
			this.page = 0
			this.list = []
			this.getList()
		},
		filtrate() {
			this.keyword = ''
			// uni.setStorageSync('mark_id','38')
			uni.navigateTo({
				url: '/pagesB/annualMeeting/filtrate?categoryId=38' + '&typeId=' + this.typeId
			})
		},
		async productVideo(data) {
			return await productVideo(data)
		},
		getList() {
			let data = {
				catid: 38,
				p: this.page,
				n: 40,
				typeId: this.typeId, //筛选分类字符串分割id ??????
				search: this.keyword,
				release_date: this.release_date,
				hit: this.hit
			}
			this.productVideo(data).then(res => {
				console.log(res)
				if (res.count < 1) {
					this.$data.uEmptyText = '暂无数据';
					return false;
				}
				this.list = res
				// console.log(this.category)
			}).catch(err => {
				console.log(err)
			})
		},
		// sortTime(){ 
		// 	if(this.release_date==''){
		// 		this.release_date='desc'
		// 	}else if(this.release_date=='desc'){
		// 		this.release_date='asc'
		// 	}else if(this.release_date=='asc'){
		// 		this.release_date='desc'
		// 	}
		// 	this.hit==''
		// 	this.getList()
		// },
		// sortNum(){ 
		// 	if(this.hit==''){
		// 		this.hit='desc'
		// 	}else if(this.hit=='desc'){
		// 		this.hit='asc'
		// 	}else if(this.hit=='asc'){
		// 		this.hit='desc'
		// 	}
		// 	this.release_date==''
		// 	this.getList()
		// },
		videoDetail(item) {
			let json = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/videoList/detail?params=${json}`
			})
			// uni.navigateTo({
			// 	url:'/pages/videoList/detail'
			// })
		}
	},
	onLoad(option) {
		// console.log('视频列表',option)
		this.showImg = this.$config.showImgApi;
		if (option.id) {
			this.typeId = uni.getStorageSync(option.id)
		}
		if (option.typeId) {
			this.typeId = option.typeId
		}
		this.getSetting()
		if (option.title_text) {
			uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
				title: option.title_text // 自定义标题内容
			})
		}
	},
	onShow() {
		if (uni.getStorageSync('goods')) {
			// this.keyword=JSON.parse(uni.getStorageSync('goods'))[0]
			let arr = JSON.parse(uni.getStorageSync('goods'))
			// typeId
			let arrid = []
			arr.forEach(val => {
				arrid.push(val.id)
			})
			if (this.options && this.options.typeId) {
				this.typeId = this.options.typeId
			} else {
				this.typeId = arrid.join(',');
			}

			this.page = 0
			this.list = []
			this.getList();
			uni.removeStorageSync('goods')
		}
		this.getList();
	},
	onShareAppMessage() {

	},
	onShareTimeline() {
		return {
			title: '西安蚂蚁团建',
			path: this.newUrl
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.header {
	@include flex_style(space-around, center, row nowrap);
	background-color: #FFB850;
	width: 750rpx;
	height: 88rpx;

	// position: fixed;
	// top: 0;
	// left: 0;
	// z-index: 999;
	.nav {
		@include flex_style(center, center, row nowrap);

		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 40rpx;
			color: #FFFFFF;
			margin-right: 12rpx;
		}

		image {
			width: 19rpx;
			height: 26rpx;
		}
	}
}

.list {
	padding: 88rpx 30rpx 30rpx;

	.item {
		width: 690rpx;
		// height: 410rpx;
		margin-top: 40rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;

		.img {
			width: 690rpx;
			height: 334rpx;
			position: relative;

			.pic {
				width: 100%;
				height: 100%;
			}

			.play {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				z-index: 21;
			}
		}

		.text {
			// width: 750rpx;
			line-height: 76rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			background-color: #FFFFFF;
			padding: 0 20rpx;
		}
	}

}

.search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 20rpx;
	background-color: #FFB850;
	padding-bottom: 10rpx;

	.searchin {
		width: 90%;
	}

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.contain {
	width: 750rpx;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999;
}

.local {
	@include flex_style(flex-start, center, row nowrap);

	text {
		display: block;
		max-width: 85rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		font-family: 苹方-简;
		font-weight: normal;
		line-height: 38rpx;
		color: #FFFFFF;
	}

	.trang {
		width: 0;
		height: 0;
		border-left: 7rpx solid transparent;
		border-right: 7rpx solid transparent;
		border-top: 10rpx solid #FFFFFF;
		margin-left: 8rpx;
	}
}

.images>image {
	width: 40rpx;
	height: 40rpx;
}

.images {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
</style>